<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>智慧书店</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      </el-breadcrumb>

      <el-table
        border
        :data="payRecordList"
        >
        <el-table-column
          prop="id"
          label="订单编号"
          align="center">
        </el-table-column>
        <el-table-column
           prop="payAmount"
           label="支付金额"
           align="center">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="支付时间"
          align="center">
          <template slot-scope="scope">
            {{scope.row.createTime|hireDateFit}}
          </template>
        </el-table-column>
        <el-table-column
          prop="tbUserInfo.userName"
          label="支付人"
          align="center">
        </el-table-column>
        <el-table-column
          prop="payStatus"
          label="支付方式"
          align="center">
          <template slot-scope="scope">
            {{scope.row.payStatus|deletedFit}}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
    import moment from 'moment'
    export default {

        name: "PayRecordList",
        data(){
            return{
                payRecordList:[],
                userInfo:{}
            }
        },
        methods:{
            findPayRecordList:function() {
                this.$http.post('/orderRecord/findPayRecordById?userInfoCode='+this.userInfo.code).then((res)=>{
                    console.log(res)
                    if (res.data.success){
                      this.payRecordList = res.data.result.payRecordById;
                    } else {
                      this.$message.error(res.data.message)
                    }
                })
            }

        },
        mounted() {
          this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
          this.findPayRecordList();
        },
        filters:{
            hireDateFit:function (val) {
                return moment(val).format("YYYY-MM-DD HH:mm:ss")
            },
            deletedFit:function (val) {
                if (val==1){
                    return "微信支付"
                }
                if (val==2){
                    return "App支付"
                }

            }
        }
    }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
</style>
